<template>
  <div class="common-head">
    <el-row>
      <div class="logo">
        <img
          src="http://demo.mxyhn.xyz:8020/cssthemes6/1.14ZF04/img/logo.png"
          alt=""
        />
      </div>
      <div class="bend">
        <marquee behavior="" direction="">
          欢迎访问商家系统-Biu Biu Biu Biu
        </marquee>
      </div>
      <div class="right">
        <el-dropdown class="user-wrapper">
          <dt>
            <span class="time">欢迎您</span>
            eewxh@163.com
            <el-icon class="arr"><arrow-down /> </el-icon>
          </dt>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">我的账户</el-dropdown-item>
              <el-dropdown-item command="info">个人中心</el-dropdown-item>
              <el-dropdown-item command="changepass">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-dropdown class="msg-wrapper">
          <dt class="clearfix">
            <el-icon class="imgg"><message /></el-icon>
            <span>消息</span>
            <span class="tag">320</span>
          </dt>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">交易通知：</el-dropdown-item>
              <el-dropdown-item command="info">系统通知</el-dropdown-item>
              <el-dropdown-item command="changepass">系统消息</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-row>
  </div>
</template>

<script>
import { ArrowDown, Message } from "@element-plus/icons";
import { reactive, toRefs, computed, ref } from "vue";

export default {
  components: {
    ArrowDown,
    Message,
  },
  setup() {
    const state = reactive({});
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  justify-content: space-between;
}
.bend {
  width: 500px;
  float: left;
  padding-top: 30px;
  color: #ff8400;
}
.common-head {
  width: 100%;
  padding-top: 5px;

  .logo {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 400px;
  }
  .right {
    height: 46px;
    width: 420px;
    padding-top: 28px;
    float: right;
    padding-right: 0;
    .user-wrapper {
      margin-left: 0;
      display: inline-block;
      float: right;
      position: relative;
      padding-top: 5px;
      margin-left: 37px;
      dt {
        border: 1px solid transparent;
        border-bottom: none;
        border-right: none;
        padding-left: 15px;
        padding-right: 30px;
        color: #999999;
        font-weight: normal;
        line-height: 41px;
        position: relative;
        span {
          padding-right: 15px;
        }
        .arr {
          right: 3px;
          top: 5px;
        }
      }
    }

    .msg-wrapper {
      margin-left: 0;
      position: relative;
      right: -10px;
      cursor: pointer;

      dt {
        width: 120px;
        padding-right: 0px;
        padding-left: 10px;
        font-weight: 400;
      }
      span {
        padding: 0;
        float: left;
        color: #999999;
      }
      .tag {
        background-color: #ff8400;
        color: #fff;
        margin-top: 13px;
        margin-left: 10px;
        border-radius: 6px;
        line-height: 1;
        padding: 2px 5px;
        font-size: 13px;
      }
      .imgg {
        position: relative;
        float: left;
        top: 13px;
        right: 0;
        margin-right: 8px;
        color: #999999;
        font-size: 18px;
      }
    }
    .msg-wrapper {
      display: inline-block;
      float: right;
      padding-top: 5px;
      dt {
        line-height: 41px;
        position: relative;
      }
    }
  }
  height: 107px;
  width: 100%;
  padding-top: 5px;
  background: url(http://demo.mxyhn.xyz:8020/cssthemes6/1.14ZF04/img/login_bg.jpg)
    repeat-x bottom;
  position: relative;
}
</style>